import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';
import classname from 'classnames';
import {browserHistory} from 'react-router';

import Store from './store.js';
import './index.less';

//component
import ReIcon from 'components/widgets/ReIcon';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'MenuCustom';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    renderMenu() {
        return (
            <div className="menu-list-wrapper">
                <div className="list-top">
                    <div className="info-item-wrapper">
                        <div className="item-title"
                             onClick={() => this.store.innerJump(`${$$.url('home')}`)}>
                            <span className="text">{'首页'}</span>
                        </div>
                    </div>
                    <div className="account-list">
                        {
                            this.store.menuList.map((item, index) => {
                                let itemTitleClassname = classname({
                                    'item-title': true,
                                    'active': item.attributes.url === browserHistory.getCurrentLocation().pathname
                                });
                                let mIndex = this.store.toggleList.findIndex((i) => {
                                    return i === item.id;
                                });
                                let active = mIndex > -1;
                                return (
                                    <div key={index}>
                                        <div className="info-item-wrapper">
                                            <div className={itemTitleClassname}
                                                 onClick={() => item.children.length !== 0 ? this.store.toggleShow(item.id) : this.store.innerJump(item.attributes.url)}>
                                                <span className="text">{item.name}</span>
                                                {
                                                    item.children.length !== 0 &&
                                                    <span><ReIcon className="icon" icon={active ? 'shouhui' : 'xiala'}/></span>
                                                }
                                            </div>
                                        </div>
                                        <div className={ active ? 'child-list' : 'child-list hide'}>
                                            {
                                                item.children.length !== 0 && item.children.map((mItem,mIndex)=>{
                                                    return(
                                                        <div className="subs-wrapper" key={mIndex}>
                                                            <div className="subs-title" onClick={() => this.store.innerJump(mItem.attributes.url)}>
                                                                <span className="text">{mItem.name}</span>
                                                            </div>
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>

                                )
                            })
                        }
                    </div>
                </div>
                <div className="list-bottom" onClick={()=>this.store.loginOut()}>
                    <ReIcon className="exit" icon="tuichu"/>
                    <span className="exit-text">退出登录</span>
                </div>
            </div>
        )
    }

    render() {

        return (
            <div className="orin-s-menucustom-root">
                {this.renderMenu()}
            </div>
        );
    }
}